<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<!-- jQuery -->
	<script type="text/javascript" th:src="@{/jquery/jquery.min.js}"></script>
	<!-- BootStrap -->
	<link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
	<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
	<!-- jQuery-Validation -->
	<script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}">
	</script>
	<script type="text/javascript" th:src=
			"@{/jquery-validation/localization/messages_zh.min.js}"></script>
	<!-- Layer -->
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<!-- 自定义的common.js -->
	<script type="text/javascript" th:src="@{/js/common.js}"></script>
	<script>
		function login() {
			// 执行输入校验
			$("#loginForm").validate({
				// 输入校验通过，执行submitLogin()函数
				submitHandler: function () {
					submitLogin();
				}
			});
		}

		function submitLogin() {
			g_showLoading();
			// 发送POST请求
			$.post("/user/proLogin", {
				mobile: $("#mobile").val(),
				vercode: $("#vercode").val(),
				password: $("#password").val()
			}, function (data) {
				layer.closeAll();
				// code为0代表成功
				if (data.code == 0) {
					// 在屏幕上显示类似Android Toast的提示框
					layer.msg("登录成功");
					// 登录成功后执行跳转
					window.location.href = "/item/list";
				} else {
					// 显示错误信息
					layer.msg(data.msg);
				}
			});
		}

		$(function () {
			refreshVerifyCode();
		});

		// 定义刷新验证码的函数
		function refreshVerifyCode() {
			$("#verifyCodeImg").attr("src",
				"/user/verifyCode?timestamp=" + new Date().getTime());
		}
	</script>
</head>
<body>
<div class="container">
	<img th:src="@{/imgs/logo.png}"
		 class="rounded mx-auto d-block" alt="logo"><h4>用户登录</h4>
	<form name="loginForm" id="loginForm" method="post">
		<div class="form-group row">
			<label for="mobile" class="col-sm-3 col-form-label">手机号：</label>
			<div class="col-sm-9">
				<input type="text" id="mobile" name="mobile"
					   required="true" minlength="11" maxlength="11"
					   class="form-control" placeholder="请输入手机号码">
			</div>
		</div>
		<div class="form-group row">
			<label for="password" class="col-sm-3 col-form-label">密码：</label>
			<div class="col-sm-9">
				<input type="password" id="password" name="password"
					   required="true" minlength="6" maxlength="16"
					   class="form-control" placeholder="请输入密码">
			</div>
		</div>
		<div class="form-group row">
			<label for="vercode" class="col-sm-3 col-form-label">验证码：</label>
			<div class="col-sm-7">
				<input type="text" id="vercode" name="vercode" class="form-control"
					   required="true" placeholder="请输入验证码"/>
			</div>
			<div class="col-sm-2">
				<img id="verifyCodeImg" width="80" height="32" alt="验证码"
					 th:src="@{/user/verifyCode}" onclick="refreshVerifyCode()"/>
			</div>
		</div>
		<div class="form-group row">
			<div class="col-sm-6 text-right">
				<button type="submit" class="btn btn-primary"
						onclick="login()">登录
				</button>
			</div>
			<div class="col-sm-6">
				<button type="reset" class="btn btn-danger"
						onclick="$('#loginForm').reset()">重设
				</button>
			</div>
		</div>
	</form>
</div>
</body>
</html>
